<template>
<div class="adress">
  <van-nav-bar title="地址" left-text="返回" left-arrow @click-left="$router.go(-1)"/>
  <!-- 地址列表 -->
  <van-address-list 
  v-model="chosenAddressId"
  :list="list"
  default-tag-text="默认"
  @add="onAdd"
  @edit="onEdit"
/>
   <!-- 点击新增地址时触发弹出框 -->
   <van-popup v-model:show="show" position="bottom" style="height: 73%;">
        <van-address-edit :area-list="areaList"  show-set-default show-search-result
           :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"
           :address-info="sartinfo" />
    </van-popup>
    <!-- 点击编辑时触发弹出框 -->
    <van-popup v-model:show="show1" position="bottom" style="height: 73%;">
        <van-address-edit :area-list="areaList"  show-delete show-set-default show-search-result
             :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave1"
            @delete="deladressfn" :address-info="sartinfo" />
    </van-popup>
    </div>
</template>

<script setup lang ="ts">
// 引入接口
import {getadress,addadress, changeadress,deladress} from '../api/adress'
import { areaList } from '@vant/area-data'
import{ref} from 'vue'
import type { Ref } from 'vue';
 
type addressobj={
   id: number,
   name: string,
   tel: string,
   address: string,
   isDefault: boolean,
   province: string,
   city: string,
   county: string,
   addressid: string
}

 interface addobj {
    userid: string,
    name: string,
    tel: string,
    province: string,
    city: string,
    county: string,
    addressDetail: string,
    isDefault: boolean,
}
// 地址列表数据
let list:Ref<Array<addressobj>>=ref([])
// 默认选择地址
const chosenAddressId = ref()
// 地址的id
let index:number = 0
// 地区编码
let areaCode =ref("")
// 新增地址弹出框
const show = ref(false)
// 编辑地址弹出框
const show1 = ref(false)
// 编辑地址初始信息
const sartinfo: Ref<addressobj | object> = ref({})
// 定义获取地址列表方法
const adressfn=()=>{
   const val={
     userid:localStorage.getItem("userid") as string
   }
  getadress(val).then((res:any)=>{
    //   console.log(res);
      list.value = []
      if(res.code==200){
           res.data.forEach((item: any, index: number) => {
                list.value.push({
                    id:index + 1,
                    name: item.name,
                    tel: item.tel,
                    address: item.addressDetail,
                    isDefault: item.isDefault,
                    province: item.province,
                    city: item.city,
                    county: item.county,
                    addressid: item.addressid
                })
                if (item.isDefault) {
                    chosenAddressId.value = index + 1
                }
            })
      }
      
  })
}
adressfn()

// 点击新增地址按钮
const onAdd=()=>{
   show.value=true
   sartinfo.value = {}
}

// 添加新地址
const onSave=(item:any)=>{
    // console.log(item);
    const obj: addobj = {
        userid: localStorage.getItem('userid') as string,
        name: item.name,
        tel: item.tel,
        province: item.province,
        city: item.city,
        county: item.county,
        addressDetail: item.addressDetail,
        isDefault: item.isDefault,
    }
    addadress(obj).then((res: any) => {
        if (res.code == 200) {
            adressfn()
            show.value = false
        }
    })
}

// 点击编辑地址按钮
const onEdit = (item: any, i: number) => {
   show1.value = true
    console.log('item', item);
    console.log( list.value[index].addressid);
    index=i
    areaCode.value = ''
    // 获取地区编码
    for (let key in areaList.province_list) {
        if ((areaList as any).province_list[key] === item.province) {
            areaCode.value += key.slice(0, 2)
        }
    }
    for (let key in areaList.city_list) {
        if ((areaList as any).city_list[key] == item.city) {
            if (key.slice(0, 2) == areaCode.value) {
                areaCode.value += key.slice(2, 4)
            }
        }
    }
    for (let key in areaList.county_list) {
        if ((areaList as any).county_list[key] === item.county) {
            if (key.slice(0, 4) == areaCode.value) {
                areaCode.value += key.slice(4)
            }
        }
    }
    // console.log(111,areaCode.value);

    // 进行信息回填
    sartinfo.value = {
        name: item.name,
        tel: item.tel,
        addressDetail: item.address,
        areaCode:areaCode.value,  //地区编码
        isDefault: item.isDefault,
        province: item.province,
        city: item.city,
        county: item.county,
    }
}

// 修改地址
const onSave1 = (item: any) => {
    const obj = {
        addressid: list.value[index].addressid,
        userid: localStorage.getItem('userid') as string,
        name: item.name,
        tel: item.tel,
        province: item.province,
        city: item.city,
        county: item.county,
        addressDetail: item.addressDetail,
        isDefault: item.isDefault,
    }
    changeadress(obj).then((res: any) => {
        if (res.code == 200) {
            list.value = []
            adressfn()
            show1.value = false
        }
    })
}


// 删除地址
const deladressfn=()=>{
   deladress({
        addressid: list.value[index].addressid
    }).then((res: any) => {
        if (res.code == 200) {
             adressfn()
            show1.value = false
        }
    })
}
</script>
<style scoped>

</style>